<template>
  <div>
    <li v-for="val in Arr" :key="val">{{ val }}</li>
    <button class="btn" @click="btnFn">走一走</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Arr: ['帅哥', '美女', '程序猿2'],
    }
  },
  methods: {
    btnFn() {
      //头部数据加入到末尾
      this.Arr.push(this.Arr[0])
      //再把头部数据删除
      this.Arr.shift()
    },
  },
}
</script>

<style less>
.btn {
  margin-top: 0.25rem;
}
</style>
